<template>
  <div id="app">
    <img :src="src" alt="" />
    <p :style="{ backgroundColor: ranDow }" @click="Fn">这是一只可怜的猫</p>
    <p @click="btn">{{ str }}</p>
    <ul v-for="(item, index) in arr" :key="index">
      <li>{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      src: "https://scpic.chinaz.net/files/pic/pic9/202003/zzpic23514.jpg",
      ranDow: "",
      str: "这是一只可怜的狗",
      arr: [],
    };
  },
  methods: {
    Fn() {
      this.ranDow = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(
        Math.random() * 256
      )}, ${Math.floor(Math.random() * 256)})`;
    },
    btn() {
      this.arr.push(this.str);
    },
  },
};
</script>

<style scoped>
#app {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  display: inline-block;
}
img {
  width: 100%;
  background-color: #fff;
}
</style>